import React, { useEffect, useState } from 'react';
import { Text, StyleSheet } from 'react-native';

interface TypeWriterProps {
  text: string;
  duration: number;
}

const TypeWriter: React.FC<TypeWriterProps> = ({ text, duration }) => {
  const [displayText, setDisplayText] = useState('');

  useEffect(() => {
    const intervalTime = duration / text.length;
    let currentIndex = 0;

    const interval = setInterval(() => {
      if (currentIndex < text.length) {
        setDisplayText(text.slice(0, currentIndex + 1));
        currentIndex++;
      } else {
        clearInterval(interval);
      }
    }, intervalTime);

    return () => clearInterval(interval);
  }, [text, duration]);

  return (
    <Text style={styles.text}>{displayText}</Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 28,
    lineHeight: 36,
    textAlignVertical:'top',
    textAlign: 'left',
    paddingHorizontal: 24,
    color: '#333',
  },
});

export default TypeWriter; 